<template>
  <div>
    <avue-tabs :option="option" @change="handleChange"></avue-tabs>
    <baseInfo v-if="type.prop === 'tab1'" :content="crudData.allConfigData.basic" @changeTab="changeTab"></baseInfo>
    <projectIntroduction v-else-if="type.prop === 'tab2'" :content="crudData.allConfigData.project"
      @changeTab="changeTab"></projectIntroduction>
    <distributionConfig v-else-if="type.prop === 'tab3'" :content="crudData.allConfigData.distribution">
    </distributionConfig>
    <resetWithdrawal v-else-if="type.prop === 'tab4'" :content="crudData.allConfigData.sunpay"></resetWithdrawal>
    <SUNPAY v-else-if="type.prop === 'tab5'" :content="crudData.allConfigData.withdrawal"></SUNPAY>
    <Money v-else-if="type.prop === 'tab6'"></Money>
    <Customer v-else-if="type.prop === 'tab7'"></Customer>
    <Message v-else-if="type.prop === 'tab8'"></Message>
    <Rewards v-else-if="type.prop === 'tab9'"></Rewards>
    <AreaCode v-else-if="type.prop === 'tab10'"></AreaCode>
  </div>
</template>
<script setup lang="ts" name="taskDetail">

import { nextTick, onMounted, reactive, ref } from 'vue';
import baseInfo from '@/views/configPage/params/baseInfo.vue'
import projectIntroduction from '@/views/configPage/params/projectIntroduction.vue'
import distributionConfig from '@/views/configPage/params/distributionConfig.vue'
import resetWithdrawal from '@/views/configPage/params/resetWithdrawal.vue'
import SUNPAY from '@/views/configPage/params/SUNPAY.vue'
import Money from '@/views/configPage/params/Money.vue'
import Customer from '@/views/configPage/params/Customer.vue'
import Message from '@/views/configPage/params/Message.vue'
import Rewards from '@/views/configPage/params/Rewards.vue'
import AreaCode from '@/views/configPage/params/AreaCode.vue'
import BasicContainer from "@/components/basic-container/main.vue";
import { configList } from '@/api/user'

const type: any = ref('')
let option: any = reactive({
  column: [{
    icon: 'el-icon-info',
    label: '基本信息',
    prop: 'tab1',
  }, {
    icon: 'el-icon-warning',
    label: '项目介绍',
    prop: 'tab2',
  }, 
  // {
  //   icon: 'el-icon-question',
  //   label: '分销配置',
  //   prop: 'tab3',
  // }, {
  //   icon: 'el-icon-question',
  //   label: '充值提现',
  //   prop: 'tab4',
  // },
  // {
  //   icon: 'el-icon-question',
  //   label: '充值配置',
  //   prop: 'tab5',
  // },
  {
    icon: 'el-icon-question',
    label: '货币配置',
    prop: 'tab6',
  },
  {
    icon: 'el-icon-question',
    label: '客服配置',
    prop: 'tab7',
  },
  {
    icon: 'el-icon-question',
    label: '短信配置',
    prop: 'tab8',
  },
  {
    icon: 'el-icon-question',
    label: '邀请奖励',
    prop: 'tab9',
  },
  {
    icon: 'el-icon-question',
    label: '区号配置',
    prop: 'tab10',
  },

  ]
})
type.value = option.column[0];
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  index_unit: [],
  allConfigData: {},
  loading: true,
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
  },
  filedArr: [],
  data: []
})
const handleChange = (column) => {
  type.value = column
}
const changeTab = (val) => {
  type.value = {
    icon: 'el-icon-info',
    label: '基本信息',
    prop: 'tab1',
  }
}
</script>
<style scoped lang="scss">
$--el-color-primary: #4e9876;

::v-deep .avue-tabs__ink-bar {
  background-color: #4e9876;
}

::v-deep .el-tabs__item {
  color: #626262;
  font-weight: bold;
}

::v-deep .el-tabs__item.is-active {
  color: #4e9876;
  font-weight: bold;
  font-size: 16px;
}

::v-deep .el-tabs__item:hover {
  color: #4e9876;
}
</style>
